<template>
	<view class="helpCenterBox">
		<up-sticky>
		<Header></Header>
		</up-sticky>
		<view class="boxOne">
			<view class="boxOne-title">
				帮助中心
			</view>
			<view class="boxOne-tetx">
				查看系统配置、日志升级、帮你轻松找到解决方案
			</view>
			<view class="boxOneImg">
				<image src="../../static/help/helpImg1.png" mode=""></image>
			</view>
		</view>

		<view class="boxTwo">
			<view class="boxTwo-title">
				帮助中心
			</view>
			<view class="boxTwoContent">
				<view class="boxTwoContentBox" v-if="helpCenterList.length > 0">
					<view class="contentItem" v-for="item in helpCenterList" :key="item.id">
						<view class="item-top">
							<image :src="item.img" mode=""></image>
						</view>
						<view class="item-boot">
							<view class="item-bootTex">
								{{item.title}}
							</view>
							<view class="item-bootButton" @click="handleToLog(item,'help')">
								查看全部
							</view>
						</view>
					</view>
				</view>
				<view class="noMessageBox" v-else>
					<view class="iconfont fa-kongxiangzi">

					</view>
					<view class="noMessageText">
						暂无内容
					</view>
				</view>
			</view>
		</view>

		<view class="boxThree">
			<view class="boxThree-title">
				更新日志
			</view>
			<view class="boxThreeContent">
				<view class="contentBox">
					<view class="contentBoxBox" v-if="updateLogList.length > 0">
						<view class="Content-item" v-for="item in updateLogList" :key="item.id">
							<view class="itemBox">
								<view class="itemBox-top">
									<view class="text">
										系统上线日志
									</view>
									<view class="xiaotext">
										{{item.update_time }}
										<span class="xiaotext-title">{{item.title}}</span>
									</view>
								</view>
								<view class="itemBox-bott" @click="handleToLog(item,'log')">
									点击进入>>>
								</view>
							</view>
						</view>
					</view>
					<view class="noMessageBox" v-else>
						<view class="iconfont fa-kongxiangzi">

						</view>
						<view class="noMessageText">
							暂无更新日志
						</view>
					</view>

				</view>
			</view>
		</view>
		<Footer></Footer>
	</view>
</template>

<script setup>
	import Header from '../compontents/header.vue'
	import Footer from '../compontents/footer.vue'
	import {
		onMounted,
		ref
	} from 'vue'
	import api from "../../utils/request.js"
	const updateLogList = ref([])
	const helpCenterList = ref([])
	onMounted(() => {
		handleGetLogList()
		handleGetHelpCenterList()
	})
	const handleGetHelpCenterList = function() {
		api.get('v1/home/getOperateList').then(res => {
			helpCenterList.value = res.data
		}).catch(err => {})
	}
	const handleGetLogList = function() {
		api.get('v1/home/getLogList').then(res => {
			updateLogList.value = res.data
		}).catch(err => {})
	}
	const handleToLog = function(item,type){
		uni.navigateTo({
			url:`/pages/compontents/logView?id=${item.id}&type=${type}`
		})
	}
</script>

<style lang="scss" scoped>
	@import '@/static/icon/iconfont.css';

	.helpCenterBox {
		width: 100%;
		height: 100%;

		.boxOne {
			height: 384rpx;
			background-color: #4771fa;
			padding-left: 33rpx;
			display: flex;
			flex-direction: column;
			justify-content: center;
			gap: 40rpx;
			position: relative;

			.boxOne-title {
				font-size: 60rpx;
				font-weight: 600;
				color: #fff;
				margin-left: 16rpx;
			}

			.boxOne-tetx {
				font-size: 22rpx;
				color: #fff;
			}

			.boxOneImg {
				width: 276rpx;
				height: 190rpx;
				position: absolute;
				right: 0;
				bottom: 0;

				image {
					width: 100%;
					height: 100%;
				}
			}
		}

		.boxTwo {
			height: 100%;
			padding: 0 83rpx;

			.boxTwo-title {
				height: 110rpx;
				line-height: 110rpx;
				text-align: center;
				font-weight: 600;
				font-size: 32rpx;
			}

			.boxTwoContent {
				height: calc(100% - 110rpx);


				.noMessageBox {
					margin: auto;
					display: flex;
					flex-direction: column;
					justify-content: center;
					align-items: center;
					gap: 12rpx;

					.fa-kongxiangzi {
						font-size: 86rpx;
						color: #ccc;
					}

					.noMessageText {
						font-size: 26rpx;
						color: #ccc;
					}
				}

				.boxTwoContentBox {
					height: 100%;
					display: flex;
					flex-wrap: wrap;
					// justify-content: center;
					gap: 28rpx;

					.contentItem {
						width: 267rpx;
						height: 323rpx;

						.item-top {
							height: 217rpx;

							image {
								width: 100%;
								height: 100%;
							}
						}

						.item-boot {
							height: calc(100% - 217rpx);
							background-color: #4771fa;
							display: flex;
							flex-direction: column;
							justify-content: center;
							align-items: center;
							gap: 10rpx;

							.item-bootTex {
								color: #fff;
								font-size: 22rpx;

							}

							.item-bootButton {
								width: 102rpx;
								height: 26rpx;
								line-height: 26rpx;
								text-align: center;
								color: #5c80f9;
								font-size: 16rpx;
								background-color: #fff;
								border-radius: 16rpx;
							}
						}
					}
				}

			}
		}

		.boxThree {
			height: 100%;
			margin-bottom: 45rpx;

			.boxThree-title {
				height: 181rpx;
				line-height: 181rpx;
				text-align: center;
				font-size: 32rpx;
				font-weight: 600;
			}

			.boxThreeContent {
				height: calc(100% - 181rpx);
				padding: 0 28rpx;

				.contentBox {
					height: 100%;

					.contentBoxBox {
						height: 100%;
						display: flex;
						flex-wrap: wrap;
						gap: 21rpx;
						// justify-content: center;
						.Content-item {
							width: 274rpx;
							height: 218rpx;
							box-shadow: 0 0 15rpx #eee;
							padding: 38rpx 20rpx 12rpx 26rpx;

							.itemBox {
								height: 100%;
								display: flex;
								flex-direction: column;
								justify-content: space-between;

								.itemBox-top {
									display: flex;
									flex-direction: column;
									gap: 10rpx;

									.text {
										font-size: 24rpx;
									}

									.xiaotext {
										font-size: 17rpx;

										.xiaotext-title {
											margin-left: 16rpx;
										}
									}
								}

								.itemBox-bott {
									color: #4771fa;
									font-size: 20rpx;
								}
							}
						}
					}

					.noMessageBox {
						margin: auto;
						display: flex;
						flex-direction: column;
						justify-content: center;
						align-items: center;
						gap: 12rpx;

						.fa-kongxiangzi {
							font-size: 86rpx;
							color: #ccc;
						}

						.noMessageText {
							font-size: 26rpx;
							color: #ccc;
						}
					}

				}

			}
		}
	}
</style>